import React from 'react'
import { useQuery } from 'remax'
import { Image, Text, View, navigateTo } from 'remax/one'
import { usePageEvent } from 'remax/macro'
import { stopPullDownRefresh } from 'remax/wechat'
import { Row, Space, Tag } from 'annar'
import useCloud from '@/hooks/use-cloud'
import Login from '@/components/login'
import styles from './index.css'

export default () => {
  const { _id } = useQuery()
  const { data, mutate } = useCloud('list-order')

  usePageEvent('onPullDownRefresh', async () => {
    await mutate()
    stopPullDownRefresh()
  })

  const item = data?.find((v: WBG.Order) => v._id === _id)
  if (!item) {
    return null
  }

  const { promotion, casts, cost, status, createAt }: WBG.Order = item

  return (
    <Login>
      <View className={styles.mainArea}>
        <View className={styles.middleArea}>
          <Space className={styles.middleBox} direction="vertical" size={12}>
            <Text className="medium-text">投放广告</Text>
            <View className={styles.itemArea}>
              <View
                className={styles.itemBox}
                hoverClassName="hover"
                onTap={() => {
                  navigateTo({
                    url: `/pages/promotion/index?_id=${promotion._id}`,
                  })
                }}
              >
                <Row className={styles.fullHeight} align="middle">
                  <View className={styles.itemBoxLeft}>
                    <Image
                      className={styles.avatarImg}
                      src={promotion.imgUrls[0]}
                      mode="aspectFill"
                    />
                  </View>
                  <Space
                    className={styles.itemBoxRight}
                    direction="vertical"
                    size={12}
                  >
                    <View className="large-text ellipsis">
                      {promotion.name}
                    </View>
                    <View className="small-text ellipsis">
                      {promotion.description}
                    </View>
                    <Space align="center" size={12}>
                      <Text className={styles.alarmText}>
                        ￥{promotion.price}
                      </Text>
                      <Text className={styles.deletedText}>
                        ￥{promotion.originalPrice}
                      </Text>
                    </Space>
                  </Space>
                </Row>
              </View>
            </View>
          </Space>
        </View>
        <View className={styles.middleArea}>
          <Space className={styles.middleBox} direction="vertical" size={12}>
            <Text className="medium-text">投放屏幕</Text>
            {casts.map((v, i) => (
              <Row key={i} justify="space-between" align="middle">
                <View key={i} className="ellipsis">
                  {v.screen.name}
                </View>
                <Tag color="green">{v.weeks.length} 个广告位</Tag>
              </Row>
            ))}
          </Space>
        </View>
        <View className={styles.middleArea}>
          <Row justify="space-between" align="middle">
            <Text className="medium-text">总计</Text>
            <Text className={styles.alarmText}>￥{cost}</Text>
          </Row>
        </View>
      </View>
    </Login>
  )
}
